<script setup>
import { ref } from 'vue';

const count = ref(0)

const name = ref("Vue.js")

function greet(event){
    alert(`hello,${name.value}`)

    console.log(event)
    if(event){
        alert(event.target.tagName) 
    }
}

function say(message) {
  alert(message)
}

function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

</script>
<template>
    <h1>Vue to Event Bind</h1>

    <input name="enterdemo" @keyup.alt.enter="alert('enter')" />

    <br>
    <!-- 单击事件将停止传递 -->
    <a @click.stop="doThis">click.stop</a>

    <!-- 提交事件将不再重新加载页面 -->
    <form @submit.prevent="onSubmit">submit.prevent</form>

    <!-- 修饰语可以使用链式书写 -->
    <a @click.stop.prevent="doThat">click.stop.prevent</a>

    <!-- 也可以只有修饰符 -->
    <form @submit.prevent>submit.prevent</form>

    <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
    <!-- 例如：事件处理器不来自子元素 -->
    <div @click.self="doThat">click.self="doThat"...</div>


    <button @click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
    <button @click="(event) => warn('Form cannot be submitted yet.', event)">
        Submit(() => {})
    </button>

    <br>
    <button @click="say('hello')">Say hello</button>
    <button @click="say('bye')">Say bye</button>    

    <button @click="greet">Greet</button>

    <button @click="count++">Add 1</button>
    <p>Count is: {{ count }}</p>
</template>
<style scoped>
</style>